<template>
  <div>
    <div style="overflow: hidden">

      <el-select
         style="float: left;width: 300px;padding: 5px"
        v-model="optionsOwnerUserId"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="负责人"
        :remote-method="getOwnerUserInfo"
        :loading="loading">
        <el-option
          v-for="(item,index) in owner_user_info"
          :key="index"
          :label="item.username"
          :value="item.id">
        </el-option>
      </el-select>

      <!--自动化数据-->
      <el-select
        style="float: left;width: 300px;padding: 5px"
        v-model="optionsAutomatedTaskId"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入自动化标题"
        :remote-method="get_automated_task_info"
        :loading="loading">
        <el-option
          v-for="(item,index) in automated_task_info"
          :key="index"
          :label="item.title"
          :value="item.id">
        </el-option>
      </el-select>

      <el-select style="float: left;padding: 5px" v-model="status" placeholder="请选择类型">
        <el-option
          v-for="(item,index) in optionsAutomated"
          :key="index"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>

      <div class="block" style="float: left;padding: 5px;">
        <el-date-picker
          v-model="startEndTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <div style="float: left;padding: 5px">
        <el-button type="primary" plain @click="createReport()">生成报告</el-button>
      </div>


    </div>
    <baseEcharts v-if="is_show" :id="'bargraph'" :data="option" style="height:600px;"></baseEcharts>
  </div>
</template>

<script>
  import baseEcharts from './baseEcharts.vue'

  export default {
    name: "reportDay",
    data() {
      return {
        status: 2,
        // choices设置
        optionsAutomated: [],  // 存储CommonChoices实际数据的列表
        is_show: false,

        startEndTime: [],  // 开始结束时间
        id: 'myReportDay',
        ChartLineGraph: null,

        // 编辑和添加选中的数据id
        loading: false,
        optionsAutomatedTaskId: [],
        optionsOwnerUserId: [],

        owner_user_info:[],  // 记录所有者
        automated_task_info: [],  // 自动化明细

        // 数据设置
        ListDataURL: this.$http.TestReportURL,  // 表格列表数据获取
        tableData: [],  // 阿贾克斯获取的初始数据
        // 适用于单次任务测试
        option: {
          title: {
            text: '按天统计报告'
          },
          legend: {},
          tooltip: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            data: []
          },
          // 声明一个 Y 轴，数值轴。
          yAxis: {},
          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
          series: []
        },

      }
    },
    created() {
      // 发送啊假克丝请求
      this.optionsAutomated = this.getChoices.automated;
      this.setOptions();
      this.startEndTime[0] = new Date();
      let currentDate = new Date();
      currentDate.setDate(currentDate.getDate() + 1);
      this.startEndTime[1] = currentDate;
      this.optionsOwnerUserId[0] = this.getUserInfo.id;
      this.getOwnerUserInfo(this.getUserInfo.username);
      this.createReport();

    },
    methods: {
      setOptions() {
        let options = [this.optionsAutomated];
        options.forEach(lis => {
          lis.unshift({'id': null, 'value': '请选择状态'})
        })
      },

      createReport() {
        this.is_show = false;
        let queryData = {
          'owner_user':this.optionsOwnerUserId[0],
          'create_time__gte': this.startEndTime ? this.$echarts.format.formatTime('yyyy-MM-dd', this.startEndTime[0]) : null, // 大于等于
          'create_time__lt': this.startEndTime ? this.$echarts.format.formatTime('yyyy-MM-dd', this.startEndTime[1]) : null,   // 小于
          'automated_task': this.optionsAutomatedTaskId ? this.optionsAutomatedTaskId[0] : null,
          'status': this.status,
          'report_status':'report_day',
        };
        let newQueryData = {};
        for (let key in queryData) {
          if (queryData[key]) {
            newQueryData[key] = queryData[key];
          }
        }
        this.$http.getApiFunc(this.$http.addApiStatus)(this.ListDataURL, newQueryData)
          .then(res => {
            if (res.data.status) {
              this.$alert(res.data.msg, '提示', {
                confirmButtonText: '确定'
              });
              this.tableData = []
            } else {
              this.tableData = res.data.data;
              this.is_show = true;
            }
          })
          .catch(err => {
            console.log(err);
          })
      },

      //  按项目名称搜索的函数
      inputFunc() {
        this.$myTool.inputFunc(this)
      },

       getOwnerUserInfo(query) {
        this.$myTool.getObjList(this, this.$http.accountURL, this.owner_user_info, query)
      },

      // 自动化数据获取
      get_automated_task_info(query) {
        this.$myTool.getObjList(this, this.$http.AutomatedTaskURL, this.automated_task_info, query)
      },
    },

    components: {
      baseEcharts
    },

    watch: {
      optionsAutomatedTaskId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
      },

      optionsOwnerUserId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
      },

      tableData: function (value) {
        let xNameList = ['总数', '执行数', '失败数', '未执行'];
        let cases_lis = ['cases_sum', 'cases_execute_sum', 'cases_failure_sum', 'cases_not_execute_sum'];
        let cases_detail_lis = ['cases_detail_sum', 'cases_detail_execute_sum', 'cases_detail_failure_sum', 'cases_detail_not_execute_sum'];
        this.option.series[0] = {name: '用例', type: 'bar', data: []};
        this.option.series[1] = {name: '步骤', type: 'bar', data: []};
        this.option.xAxis.data = xNameList;
        cases_lis.forEach(lis => {
          this.option.series[0].data.push(this.tableData[lis]);
        });
        cases_detail_lis.forEach(lis => {
          this.option.series[1].data.push(this.tableData[lis]);
        });
      }
    },
    computed: {
      getChoices() {
        return this.$store.state.choicesInfo
      },
      getUserInfo(){
        return this.$store.state.userInfo
      }
    },
  }
</script>

<style scoped>
  .paging {
    padding-top: 20px;
  }

  .input-data {
    float: left;
    width: 200px;
    padding: 5px 5px;
  }

  .mytable {
    /*width: 120px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
